import React, {Component} from "react"
import {UserOutlined, LockOutlined, InsuranceOutlined } from '@ant-design/icons'
import { Button, Form, Input, Checkbox , message } from 'antd'
import { FormInstance } from 'antd/es/form';
import { history } from 'umi';

import CaptrueImage from '@/assets/images/capture.png'
import styles from './index.less'


class Login extends Component {
  myRef = React.createRef<FormInstance>();
   state = {
     code: '',
     username: '',
     password: '',
     isRecord: false

   }

 // 表单检验
 submit = () => {
  history.push('/home')
  //  this.myRef.current.submit()

 }
 // 表单重置
 resetForm = () => {
   this.myRef.current!.resetFields()
 }
  // 表单验证成功，进行登录
  login =  async () => {
    // const res = await AdminLogin(this.state)
    // if (res.code === 200) {
    //   const token = res.data.token
    //   window.sessionStorage.setItem('token', token)
    //   window.sessionStorage.setItem('user', JSON.stringify(res.data.data))
    //   message.success('登录成功')
    //   this.props.history.push('/home')
    // }  else {
    //   message.error('登录失败')
    // }
    
  }
 // 表单验证失败
  FormError = () => {
   message.error('表单数据有误')
  }
  // 单选框选择
  onRadioChange = (e:any) => {
    const srole = e.target.value
    this.setState({srole})
  }
  // 监听密码框输入值的变化
  changeUserName = (e:any) => {
     const username = e.target.value
     this.setState({username})
  }
  // 监听密码框的值变化
  changePassword = (e:any) => {
    const password = e.target.value
    this.setState({password})
 }

  render() {
    const { code, username, password, isRecord } = this.state
    return (
        <div className={styles.login_container}>
            <div className={styles.login}>
                <div className={styles.loginItem}>
                  <div className={styles.formTitle}>
                       赣鹰低代码平台
                  </div>
                  <Form
                    ref={this.myRef}
                    name="normal_login"
                    initialValues={{
                      remember: true,
                    }}
                    onFinish={this.login}
                    onFinishFailed={this.FormError}
                >
                    <Form.Item
                      className={styles.formItem}
                      name="userName"
                      rules={[
                        {
                          required: true,
                          message: '用户名不能为空',
                        },
                      ]}
                    >
                      <Input   className={styles.formInput} prefix={<UserOutlined className={styles.iconItem} value={username} />} placeholder="请输入用户名" onChange={this.changeUserName} />
                    </Form.Item>
                    <Form.Item
                      name="password"
                      className={styles.formItem}
                      rules={[
                        {
                          required: true,
                          message: '密码不能为空',
                        },
                      ]}
                    >
                      <Input
                      className={styles.formInput}
                        prefix={<LockOutlined className={styles.iconItem} />}
                        type="password"
                        placeholder="请输入登录密码"
                        value={password}
                        onChange={this.changePassword}
                      />
                    </Form.Item>
                    <Form.Item
                      name="code"
                      className={styles.formItem}
                      rules={[
                        {
                          required: true,
                          message: '验证码不能为空',
                        },
                      ]}
                    >
                      <div  className={[styles.codeBox, 'flex'].join(' ')}>
                            <Input
                              className={styles.formInput}
                              style={{borderRadius: '4px 0 0 4px'}}
                              prefix={<InsuranceOutlined className={styles.iconItem} />}
                              type="password"
                              placeholder="请输入验证码"
                              value={password}
                              onChange={this.changePassword}
                            />
                          <div className={styles.capture}>
                            <img src={ CaptrueImage } />
                          </div>
                      </div>
                    </Form.Item>
              </Form>
              <div className={styles.setCode}>
                 <Checkbox checked={isRecord} onChange={ (e) => { this.setState({ isRecord: e.target.checked})}}>记住密码</Checkbox>
              </div>
            <div className={styles.loginBtn}>
               <Button type="primary" onClick={this.submit} >登录</Button>
            </div>
      </div>
        </div>
        </div>
    )
  }
}

export default Login